import { View, Text, Image } from '@tarojs/components'
import BasicLayout from '@/layout'
import BasicNavbar from '@/components/BasicNavbar'
import { useState } from 'react'
import useNavigateBar from '@/hooks/useNavigateBar'
import SideMenuSvg from '@/assets/images/sideMenu.svg'
// import { ActionSheet } from '@antmjs/vantui'
import PersonelDocSvg from '@/assets/images/personel/personel_doc.svg'
import AuthRecordSvg from '@/assets/images/personel/personel_auth_record.svg'
import SettingsManageSvg from '@/assets/images/personel/personel_settings.svg'
import SamplingManageSvg from '@/assets/images/personel/personel_sampling_manage.svg'
import AboutUsSvg from '@/assets/images/personel/personel_about.svg'
import HelperSvg from '@/assets/images/personel/personel_helper.svg'
import SecretSvg from '@/assets/images/personel/personel_secret.svg'
import UserXySvg from '@/assets/images/personel/personel_xieyi.svg'
import LoginOutSvg from '@/assets/images/personel/personel_loginout.svg'

import { Button } from '@nutui/nutui-react-taro'
import SideMenuDrawer from './components/SideMenuDrawer'
import './index.less'
import Avatar from '@/components/Avatar'

interface MenuListItem {
  label: string,
  icon: string
}

const menuList: MenuListItem[] = [
  { label: '个人档案', icon: PersonelDocSvg },
  { label: '审批记录', icon: AuthRecordSvg },
  { label: '配置管理', icon: SettingsManageSvg },
  { label: '样品管理', icon: SamplingManageSvg },
  { label: '关于我们', icon: AboutUsSvg },
  { label: '帮助中心', icon: HelperSvg },
  { label: '隐私声明', icon: SecretSvg },
  { label: '用户协议', icon: UserXySvg },
]

export default function Personel() {
  const { navBarHeight } = useNavigateBar()
  const [sideMenuVisible, setSideMenuVisible] = useState(false);

  function renderMenu(item: MenuListItem, index: number) {
    return (
      <View key={index} className='menuItem'>
        <Image src={item.icon} />
        <Text>{item.label}</Text>
      </View>
    )
  }

  return (
    <>
      <View className='personel'>
        <BasicLayout>
          <BasicNavbar>
            <Image src={SideMenuSvg} onClick={() => setSideMenuVisible(true)} />
            <Avatar />
            <Text>right</Text>
          </BasicNavbar>
          <View className='personelContent' style={{ marginTop: `${navBarHeight}px` }}>
            <View className='menus'>
              {
                menuList.map((item, index) => renderMenu(item, index))
              }
            </View>
            <View className='loginOut'>
              <Button block type='default' size='large'><Image src={LoginOutSvg} /> 退出登录</Button>
            </View>
          </View>
        </BasicLayout>
        <SideMenuDrawer visible={sideMenuVisible} onClose={() => setSideMenuVisible(false)} />
      </View>

    </>
  )
}
